<template>
  <view class="app-container">
    <!-- 我的头像与名字区域 -->
    <view class="app-header padding-sm" @click="changeInfo">

      <view class="cu-avatar round lg" :style="{'background-image': 'url(' + avatar + ')'}">
      </view>
      <!-- 名字信息 -->
      <view class="user-info">
        <view class="user-name">{{ userInfo && userInfo.nickname ? userInfo.nickname : '' }}</view>
        <view class="user-details">{{ userInfo &&  userInfo.phone ?  userInfo.phone : '' }}</view>
        <!-- 其他信息，如职位、地点等 -->
      </view>

      <!-- 切换就诊人 -->
      <view class="right-button">
        <text class="right-text">账号信息</text>
        <view class="text-xxl">
          <text class="right-icon text-lg lg cuIcon-right"></text>
        </view>
      </view>
    </view>

    <!-- 我的应用 -->
    <view class="app-body margin-sm" style="margin-top: 20px;">
      <!-- 我的应用 -->
      <view class="my-app">
        <view class="app-title">
          我的应用
        </view>
        <view class="app-list">
          <!-- 应用 -->
          <view class="app-item" @click="basicInfo">
            <image :src="medicalInfoImg"></image>
            <text>诊断信息</text>
          </view>

          <!-- BMI分析 -->
          <view class="app-item" @click="bmiEvaluation">
            <image :src="bmiImg"></image>
            <text>BMI分析</text>
          </view>

        </view>
      </view>
    </view>

    <!-- 设置 -->
    <view class="app-body margin-sm" style="margin-top: 15px;">
      <!-- 我的应用 -->
      <view class="my-app">
        <view class="app-title">
          设置
        </view>
        <view class="app-list">
          <!-- 应用 -->
          <view class="app-item" @click="changeInfo">
            <image :src="mySettingImg"></image>
            <text>账号管理</text>
          </view>

        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    onLoad() {
      // 为默认图像赋初值
      if (this.$staticUrl) {
        this.defaultAvatar = this.$staticUrl + 'my-icon-def-avatar.png';
        this.mySettingImg = this.$staticUrl + 'my-icon-my-setting.png';
        this.medicalInfoImg = this.$staticUrl + 'my-icon-medical-info.png';
        this.bmiImg = this.$staticUrl + 'my-icon-bmi.png';
      } else {
        console.error('staticUrl 未定义');
      }
      this.init();
    },
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['userInfo']),
    },
    methods: {
      ...mapMutations('m_user', ['redirectLoginAsync']),
      async init() {
        const tabPath = '/' + this.getCurrentTabPath();
        await this.redirectLoginAsync(tabPath);
        // 初始化头像
        this.avatar = this.userInfo.avatar ? this.userInfo.avatar : this.defaultAvatar;
      },
      // 获取当前页面路径
      getCurrentTabPath() {
        const pages = getCurrentPages(); // 获取当前页面栈
        return pages[pages.length - 1].route;
      },
      // BMI分析
      bmiEvaluation() {
        uni.navigateTo({
          url: '/subpkg/bmi_evaluation/bmi_evaluation'
        })
      },
      // 患者基础信息
      basicInfo() {
        uni.navigateTo({
          url: '/subpkg/basic_info/basic_info'
        })
      },
      // 更改患者信息
      changeInfo() {
        uni.navigateTo({
          url: '/subpkg/my_info/my_info'
        })
      },
      // 选择头像
      onChooseAvatar(e) {
        const {
          avatarUrl
        } = e.detail
        this.setData({
          avatarUrl,
        })
      }
    },
    data() {
      return {
        defaultAvatar: '',
        avatar: '',
        mySettingImg: '',
        medicalInfoImg: '',
        bmiImg: ''
      };
    }
  }
</script>

<style lang="scss">
  .app-container {
    top: 0;
    left: 0;
    width: 100vw;
    /* 设置宽度为视口宽度的100% */
    height: 100vh;
    position: absolute;
    z-index: 1;
  }

  .app-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    /* 上部分高度为20% */
    background-color: #1cbbb4;
    z-index: 1;
    /* 将 ::before 伪元素放在 z-index 层叠顺序中的较低位置 */
  }

  .app-header {
    position: relative;
    /* 如果需要相对定位 */
    display: flex;
    align-items: center;
    z-index: 2;

    /* 设置为大于背景的值 */
    .user-info {
      margin-left: 10px;

      /* 调整名字和头像之间的间距 */
      .user-name {
        font-size: 15px;
        font-weight: bold;
        color: white;
        margin-bottom: 5px;
      }

      .user-details {
        font-size: 12px;
        color: #f5f5f5;
      }
    }

    .right-button {
      margin-left: auto;
      display: flex;
      align-items: center;

      .right-text {
        font-size: 13px;
        color: #f5f5f5;
        margin-right: 5px;
      }

      .right-icon {
        color: white;
      }
    }
  }

  .app-body {
    position: relative;
    z-index: 2;

    // 我的应用
    .my-app {
      border-radius: 8px;
      height: 100px;
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 5px 8px;

      /* 添加阴影效果 */
      .app-title {
        font-size: 13px;
      }

      /** 应用容器 */
      .app-list {
        display: flex;
        flex-wrap: wrap;

        .app-item {
          width: 25%;
          margin-top: 12px;
          margin-bottom: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            width: 40px;
            height: 40px;
          }

          text {
            font-size: 12px;
            color: #8a8a8a;
          }
        }
      }
    }

  }
</style>